<template>
	<view class="u-flex u-flex-wrap">
		<view class="u-p-16" @tap="$emit('setFormat', 'bold')">
			<text class="editor-icon icon-a-bianzu4 u-font-36" :class="{'c-primary':props.formats.bold}"></text>
		</view>
		<view class="u-p-16" @tap="$emit('setFormat', 'italic')">
			<text class="editor-icon icon-a-bianzu2 u-font-36" :class="{'c-primary':props.formats.italic}"></text>
		</view>
		<view class="u-p-16" @tap="$emit('setFormat', 'underline')">
			<text class="editor-icon icon-a-bianzu3 u-font-36" :class="{'c-primary':props.formats.underline}"></text>
		</view>
		<view class="u-p-16" @tap="$emit('setFormat', 'strike')">
			<text class="editor-icon icon-a-bianzu7 u-font-36" :class="{'c-primary':props.formats.strike}"></text>
		</view>
		<view class="u-p-16" @tap="$emit('setFormat', 'align', 'left')">
			<text class="editor-icon icon-xingzhuang1 u-font-36" :class="{'c-primary':props.formats.align === 'left'}"></text>
		</view>
		<view class="u-p-16" @tap="$emit('setFormat', 'align', 'center')">
			<text class="editor-icon icon-a-xingzhuang7 u-font-36" :class="{'c-primary':props.formats.align === 'center'}"></text>
		</view>
		<view class="u-p-16" @tap="$emit('setFormat', 'align', 'right')">
			<text class="editor-icon icon-a-xingzhuang21 u-font-36" :class="{'c-primary':props.formats.align === 'right'}"></text>
		</view>
		<view class="u-p-16" @tap="$emit('setFormat', 'lineHeight', '2')">
			<text class="editor-icon icon-bianzu u-font-36" :class="{'c-primary':props.formats.lineHeight}"></text>
		</view>
		<view class="u-p-16" @tap="$emit('removeFormat')">
			<text class="editor-icon icon-a-bianzu72 u-font-36"></text>
		</view>
		<view class="u-p-16" @tap="$emit('setFormat', 'fontFamily', 'Pacifico')">
			<text class="editor-icon icon-a-xingzhuang6 u-font-36" :class="{'c-primary':props.formats.fontFamily}"></text>
		</view>
		<view class="u-p-16" @tap="$emit('setFormat', 'fontSize', '24px')">
			<text class="editor-icon icon-lujing u-font-36" :class="{'c-primary':props.formats.fontSize === '24px'}"></text>
		</view>
		<view class="u-p-16" @tap="$emit('setFormat', 'color', AppSkin.primary)">
			<text class="editor-icon icon-xingzhuang u-font-36" :class="{'c-primary':props.formats.color === AppSkin.primary}"></text>
		</view>
		<view class="u-p-16" @tap="$emit('setFormat', 'backgroundColor', AppSkin.primary)">
			<text class="editor-icon icon-a-xingzhuang5 u-font-36" :class="{'c-primary':props.formats.backgroundColor === AppSkin.primary}"></text>
		</view>
		<view class="u-p-16" @tap="$emit('insertDate')">
			<text class="editor-icon icon-a-bianzu5 u-font-36" ></text>
		</view>
		<view class="u-p-16" @tap="$emit('setFormat', 'list', 'bullet')">
			<text class="editor-icon icon-a-bianzu6 u-font-36" :class="{'c-primary':props.formats.list === 'bullet'}"></text>
		</view>
		<view class="u-p-16" @tap="$emit('setFormat', 'list', 'check')">
			<text class="editor-icon icon-a-bianzu8 u-font-36" :class="{'c-primary':props.formats.list === 'unchecked'}"></text>
		</view>
		<view class="u-p-16" @tap="$emit('setFormat', 'list', 'ordered')">
			<text class="editor-icon icon-bianzu1 u-font-36" :class="{'c-primary':props.formats.list === 'ordered'}"></text>
		</view>
		<view class="u-p-16" @tap="$emit('undo')">
			<text class="editor-icon icon-a-bianzu10 u-font-36" ></text>
		</view>
		<view class="u-p-16" @tap="$emit('redo')">
			<text class="editor-icon icon-a-bianzu11 u-font-36" ></text>
		</view>
		<view class="u-p-16" @tap="$emit('insertDivider')">
			<text class="editor-icon icon-a-bianzu12 u-font-36" ></text>
		</view>
		<view class="u-p-16" @tap="$emit('insertImage')">
			<text class="editor-icon icon-a-bianzu13 u-font-36" ></text>
		</view>
		<view class="u-p-16" @tap="$emit('setFormat', 'header', 'H1')">
			<text class="editor-icon icon-a-bianzu14 u-font-36" :class="{'c-primary':props.formats.header === 1}"></text>	
		</view>
		<view class="u-p-16" @tap="$emit('setFormat', 'script', 'sub')">
			<text class="editor-icon icon-a-xingzhuang2 u-font-36" :class="{'c-primary':props.formats.script === 'sub'}"></text>	
		</view>
		<view class="u-p-16" @tap="$emit('setFormat', 'script', 'super')">
			<text class="editor-icon icon-a-xingzhuang3 u-font-36" :class="{'c-primary':props.formats.script === 'super'}"></text>	
		</view>
		<view class="u-p-16" @tap="$emit('setFormat','indent','+1')">
			<text class="editor-icon icon-xingzhuang2 u-font-36" ></text>
		</view>
		<view class="u-p-16" @tap="$emit('setFormat','indent','-1')">
			<text class="editor-icon icon-a-xingzhuang41 u-font-36" ></text>
		</view>
	</view>
</template>

<script lang="ts">
	import skinMixIn from '@/common/mixin/skinMixIn'
	import {
		defineComponent
	} from 'vue'
	
	export default defineComponent({
		mixins:[skinMixIn],
		options: {
			virtualHost: true
		}
	})
</script>
<script setup lang="ts">
	const props = defineProps<{
		formats ?: Object
		
	}>()

</script>

<style>
	@import '../static/font/editor/iconfont.css';
</style>
